<template>
    <div>
        <mavon-editor
                ref="md"
                style="height: 60rem"
                v-model="value"
                @change="changeData"
                @imgAdd="imgAdd"


                :externalLink="externalLink"
                :ishljs="true"
        />
    </div>
</template>

<script>
    import '@/assets/markdown/github.min.css';

    let publicPath = '';
    if (process.env.NODE_ENV === 'production') {
        publicPath = '/public';
    }
    export default {
        name: "Editor",
        model:{
            prop: "content",
            event: "change",
        },
        props: {
            content: {
                default: "",
                required: false,
                type: String,
            }
        },
        data() {
            return {
                value: "",
                dirNum: "", // 服务器图片存放的文件夹

                externalLink: {
                    markdown_css: function() {
                        // 这是你的markdown css文件路径
                        return publicPath + '/markdown/markdown/github-markdown.min.css';
                    },
                    hljs_js: function() {
                        // 这是你的hljs文件路径
                        return publicPath + '/markdown/highlightjs/highlight.min.js';
                    },
                    hljs_css: false,
                    katex_css: function() {
                        // 这是你的katex配色方案路径路径
                        return publicPath + '/markdown/katex/katex.min.css';
                    },
                    katex_js: function() {
                        // 这是你的katex.js路径
                        return publicPath + '/markdown/katex/katex.min.js';
                    }
                }
            }
        },
        methods: {
            changeData(value, render) {
                // console.log(this.$refs.md.$imgUpdateByUrl(1, "123"));
                // console.log(value)
                // console.log(render)
                this.$emit("change", value);
                this.$emit("changeHtml", render);
            },
            async imgAdd(pos, $file) {
                let formData = new FormData();
                formData.append("img", $file);
                formData.append("dirNum", this.dirNum);
                let url = await this.$store.dispatch("article/uploadArticleImg", formData)
                this.$refs.md.$img2Url(pos, url);
                console.log(url);
            }
        },
        async mounted() {
            this.dirNum = await this.$store.dispatch("article/getUploadDirNum");
        }
    }
</script>

<style scoped>
    /deep/ .v-note-help-show {
        line-height: 4rem;
    }
</style>